<template>
  <view>
    <view class="rulerContainer">
      <view v-if="finishValue" class="finish-value">
        <span class="fv-num">{{ finishValue }}</span>
        <span class="fv-unit">{{ ruleType }}</span>
      </view>
      <view ref="textTopLine" :class="['text-top-icon', moving ? 'moving' : '']"></view>
      <!-- display-multiple-items 同时显示的滑块数量 -->
      <swiper
        :current="computedCurrent"
        :display-multiple-items="swiperMultipleItems"
        :acceleration="true"
        class="swiper"
        active-class="active"
        @change="finishRuler"
        @touchstart="swiperTouchStart"
        @touchend="swiperTouchEnd"
      >
        <template v-for="(item, index) in visibleMaxValue">
          <swiper-item
            v-if="index >= visibleMinValue && index <= visibleMaxValue"
            :key="index"
            :class="['swiper-item', finishValue === index && !moving ? 'swiper-item-active' : '']"
          >
            <view class="si-inner">
              <view :class="['zoro-line', index % 10 === 0 || index % 10 === 5 ? 'num-line-6' : 'num-line-3']"></view>
              <view v-if="index % 10 === 0" :key="index" class="text-num-init">
                <view class="zoro-line-num">{{ index }}</view>
              </view>
            </view>
          </swiper-item>
        </template>
      </swiper>
    </view>
  </view>
</template>
<script>
export default {
  name: 'SwiperRuler',
  props: {
    defaultValue: {
      type: Number,
      default: 100
    },
    maxValue: {
      // 可以被选中的最大值
      type: Number,
      default: 100
    },
    minValue: {
      // 可以被选中的最小值
      type: Number,
      default: 0
    },
    ruleType: {
      type: String,
      default: 'cm'
    },
    swiperMultipleItems: {
      // swiper同时可以显示的滑块数量
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      finishCurrent: 0,
      finishValue: 0,
      moving: false
    };
  },
  computed: {
    computedCurrent: {
      get: function () {
        return this.defaultValue - this.minValue;
      },
      set: function (newVal) {
        this.defaultValue = newVal;
      }
    },
    visibleMinValue() {
      // console.log('visibleMinValue:', this.minValue - this.swiperMultipleItems / 2);
      return this.minValue - this.swiperMultipleItems / 2;
    },
    visibleMaxValue() {
      // console.log('visibleMaxValue:', this.maxValue + this.swiperMultipleItems / 2);
      return this.maxValue + this.swiperMultipleItems / 2;
    }
  },
  created() {
    this.halfSwiperMultipleItems = this.swiperMultipleItems / 2;
    this.finishCurrent = this.finishValue = this.computedCurrent + this.minValue;
  },
  methods: {
    finishRuler(e) {
      this.finishCurrent = e.detail.current;
      // console.log('finishCurrent:', this.finishCurrent);
      let finishValue = e.detail.current + this.minValue;
      if (finishValue < this.minValue || finishValue > this.maxValue) {
        this.computedCurrent = this.defaultValue;
      }
      this.finishValue = finishValue;
      this.$emit('finishRuler', finishValue);
    },
    swiperTouchStart() {
      this.moving = true;
    },
    // swiperTouchMove(e) {
    //   console.log()
    //   this.moving = true;
    // },
    swiperTouchEnd() {
      this.moving = false;
    }
  }
};
</script>
<style scoped lang="scss">
/* 在公共样式添加此代码 */
/* .rulerContainer .uni-swiper-slide-frame{
		left:50%;
		width:16rpx!important;
	} */
/* 在公共样式添加此代码 */

$swiper-width: 100%;

.rulerContainer {
  text-align: center;

  // padding: 0rpx 20rpx;
  position: relative;
  width: $swiper-width;
  .finish-value {
    text-align: center;
    color: #e7736e;
    font-size: 24rpx;
    height: 60rpx;
    line-height: 60rpx;
    .fv-num {
      font-size: 40rpx;
    }
    .fv-unit {
      font-size: 28rpx;
    }
  }
  .text-top-icon {
    width: 0rpx;
    border-left: 1rpx solid #e7736e;
    height: 40rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 60rpx;
    z-index: 100;
    font-size: 0px;
    display: none;
    &.moving {
      display: block;
    }
  }
  // swiper
  .swiper {
    width: inherit; // swiper-item 宽度为640 / 40  = 16
    height: 120rpx;
    background: #eee;
    .swiper-item {
      overflow: visible;
      &.swiper-item-active {
        .si-inner {
          .zoro-line {
            &::before {
              height: 40rpx;
              border-color: #e7736e;
            }
          }
        }
      }
    }
  }
  .swiper-num {
    display: flex;
    align-items: center;
    .text-num-init {
      flex-shrink: 0;
    }
  }
}

.rulerContainer .zoro-line {
  position: relative;
  width: 100%;
  text-align: left;
}
.rulerContainer .zoro-line::before {
  display: block;
  content: '';
  height: 43rpx;
  position: absolute;
  border-left: 1rpx solid #b5b5b5;
  top: 0;
  left: 0;
}
.rulerContainer .num-line-3::before,
.rulerContainer .num-line-5::before,
.rulerContainer .num-line-7::before,
.rulerContainer .num-line-9::before,
.rulerContainer .num-line-11::before,
.rulerContainer .num-line-13::before {
  height: 16rpx;
}

.rulerContainer .num-line-6::before,
.rulerContainer .num-line-10::before {
  height: 32rpx;
  border-width: 2rpx;
}

.rulerContainer .num-line-end::after {
  border-left: 1rpx solid #b5b5b5;
  height: 32rpx;
  border-width: 2rpx;
}

.rulerContainer .num-line-1::before,
.rulerContainer .num-line-15::before {
  height: 16rpx;
  border-width: 2rpx;
}
.rulerContainer .num-line-12::before,
.rulerContainer .num-line-4::before {
  height: 38rpx;
}

.rulerContainer .num-line-8::before {
  height: 48rpx;
  border-width: 2rpx;
}

.rulerContainer .num-line-2::before,
.rulerContainer .num-line-14::before {
  height: 32rpx;
}

.rulerContainer .zoro-line-num {
  top: 50rpx;
  width: 50rpx;
  text-align: left;
  position: relative;
  top: 70rpx;
  color: #b3b3b3;
  font-size: 24rpx;
  text-align: center;
  margin-left: -25rpx;
}
.rulerContainer .big-line-num {
  left: -14rpx;
}
.rulerContainer .text-num-init {
  text-align: left;
  width: 100%;
  display: block;
  height: 100%;
}
</style>
